<template>
  <div class="search-history">
    <van-cell title="搜索历史">
      <!-- 插槽 点击展开 全部删除和完成按钮 切换回收垃圾桶和全部删除和完成的状态 -->
      <template v-if="isDeleteShow">
        <!-- 删除所有的历史记录 传给父组件进行全部历史数据的删除操作 -->
        <span @click="$emit('clear-search-history')">全部删除</span>
        &nbsp;&nbsp;
        <span @click="isDeleteShow = false">完成</span>
      </template>
      <van-icon v-else name="delete" @click="isDeleteShow = true" />
    </van-cell>
    <van-cell
      :title="item"
      v-for="(item, index) in searchHistories"
      :key="index"
      @click="onHistoryClick(item, index)"
    >
      <!-- 绑定点击事件 删除单个的历史记录 -->
      <van-icon name="close" v-if="isDeleteShow" />
    </van-cell>
  </div>
</template>
<script>
// 数据持久化 必定是利用watch监听器来协助  监听到有数据变化的时候,直接用我们已经封装好的setItem来进行数据的存储
export default {
  name: 'SearchHistory',
  // props中接收父组件传递过来的 searchHistories
  props: {
    searchHistories: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      // 控制删除相关元素的显示状态的
      isDeleteShow: false, // 默认为不删除
      searchHistoriesClone: this.searchHistories // 将父组件传递过来的值拷贝一份操作
    }
  },
  methods: {
    onHistoryClick (item, index) {
      // 在删除状态下,删除单个的历史记录
      if (this.isDeleteShow) {
        // 不能直接对父传子的数据进行修改操作 需要克隆一份
        this.searchHistoriesClone.splice(index, 1)
        // 操作删除
      } else {
        // 不是删除的时候 就进入搜索
        this.$emit('search', item)
        // 搜索就直接让付父组件搜索就是啦~~~方法给父组件
      }
    }
  }
}
</script>
<style scoped lang="less">
</style>
